<template>
  <div class="userdein">
    <div id="mxbUserDeIn" ref="echarts" style="width:4.68rem;height:3.95rem"></div>
  </div>
</template>

<script>
import {getUserDeIn} from 'src/api/api'
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
export default {
  props: {
    clientHeight: {
      type: String,
      default: ''
    },
    clientWidth: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      userDeInData: {
        title: {
          text: '用户增减数据',
          textStyle: {
            color: '#fff'
          }
        },
        color: ['#e3a500', '#00ba3d'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['注册人数', '实名人数', '注销人数'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true,
              backgroundColor: '#0F1C30'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: [],
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          nameTextStyle: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          nameTextStyle: {
            color: '#fff'
          }
        },
        series: [{
          name: '注册人数',
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [{
                  offset: 0,
                  color: '#00BEE6'
                },
                {
                  offset: 1,
                  color: '#0048FF'
                }
                ]
              )
            }
          },
          barWidth: '20%',
          data: []
        },
        {
          name: '实名人数',
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            }
          },
          data: []
        },
        {
          name: '注销人数',
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            }
          },
          data: []
        }
        ]
      },
      userDeInChart: null
    }
  },
  mounted() {
    this._getUserDeIn()
    this.selfAdaption()
  },
  methods: {
    selfAdaption () {
      let _this = this
      setTimeout(() => {
        window.addEventListener('resize', function () {
          _this.userDeInChart.resize()
        })
      }, 10)
    },
    _getUserDeIn() {
      this.userDeInChart = echarts.init(document.getElementById('mxbUserDeIn'))
      this.userDeInChart.setOption(this.userDeInData)
      let userCancelCount = []
      let userRealCount = []
      let userRegistCount = []
      let activeX = []
      getUserDeIn().then(res => {
        if (res.status === '0') {
          for (let i = 0; i < res.result.data.length; i++) {
            let realCount = res.result.data[i].realCount
            let registCount = res.result.data[i].registCount
            let cancelCount = res.result.data[i].cancelCount
            let date = res.result.data[i].date.substr(res.result.data[i].date.length - 4).slice(0, 2) + '/' +
                res.result.data[i].date.substr(res.result.data[i].date.length - 4).slice(2)
            activeX.push(date)
            userRealCount.push(realCount)
            userRegistCount.push(registCount)
            userCancelCount.push(cancelCount)
          }
          this.userDeInChart.setOption({
            xAxis: {
              data: activeX
            },
            series: [{
              name: '注册人数',
              data: userRegistCount
            },
            {
              name: '实名人数',
              data: userRealCount
            },
            {
              name: '注销人数',
              data: userCancelCount
            }
            ]
          })
        }
      })
    }
  }
}
</script>

<style>
.userdein{
  width: 100%;
  height: 100%;
}
</style>
